<!--*************************************
* @update: 2021-09-07  LiLinBin  [创建文件]
* 
* @description: 登录首页
****************************************-->
    
<template>
    <div class="el-box pr">
        <div class="login-box">
            <div class="logo-icon"></div>
            <div class="text-box">
                <span class="text">VTRON大数据可视化云平台软件</span>
                <span class="num">2.0</span>
            </div>
            <div class="login-text">登录</div>

            <a-form ref="formRef"
                :model="formState"
                :rules="rules"
                autocomplete="off">
                <a-form-item name="user">
                    <a-input v-model:value="formState.user"
                        size="large"
                        placeholder="Username">
                        <template #prefix>
                            <UserOutlined size="large" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item name="password">
                    <a-input v-model:value="formState.password"
                        @keyup.enter="onLogin"
                        size="large"
                        type="password"
                        placeholder="Password">
                        <template #prefix>
                            <LockOutlined size="large" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary"
                        size="large"
                        @click="onLogin"
                        :disabled="formState.user === '' || formState.password === ''">
                        登录
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
    
<script>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { ref, reactive } from 'vue'
// import changeMixin from './changeMixin'

export default {
	des: '登录首页', //组件功能描述
	name: 'systemLogin', //组件名称: 项目名称+场景名称+组件名称
	// mixins: [changeMixin],
	components: {
		UserOutlined,
		LockOutlined
	},
	props: {},
	setup(props, { attrs, slots, emit }) {
		const formRef = ref()
		const formState = reactive({
			user: '',
			password: ''
		})

		const validatePass = async (rule, value) => {
			if (value === '') {
				return Promise.reject('请输入用户名')
			} else if (value !== 'admin') {
				return Promise.reject('用户名错误')
			} else {
				return Promise.resolve()
			}
		}

		const validatePass2 = async (rule, value) => {
			if (value === '') {
				return Promise.reject('请输入密码')
			} else if (value !== 'admin') {
				return Promise.reject('密码错误')
			} else {
				return Promise.resolve()
			}
		}

		const rules = {
			user: [{ required: true, validator: validatePass, trigger: 'change' }],
			password: [{ validator: validatePass2, trigger: 'change' }]
		}

		const resetForm = () => {
			formRef.value.resetFields()
		}

		return {
			formState,
			formRef,
			rules,
			resetForm
		}
	},
	data() {
		return {
			width: '1920px', //宽
			height: '1080px' //高
		}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		this.init()
		// this.$nextTick(this.init)
	},
	methods: {
		init() {
			this.initData()
		},

		initData() {},

		async onLogin() {
			const { user, password } = this.formState
			if (user !== 'admin' && password !== 'admin') return

			localStorage.setItem('checkLogin', JSON.stringify({ pass: true }))
			this.$router.push({ path: '/projectsTest' })
		}
	},
	beforeUnmount() {}
}
</script>


<style scoped lang='less'>
.el-box {
	width: 100%;
	height: 100%;
	// width: 1920px;
	// height: 1080px;
	background: url('/images/logo/登录bg.jpg') no-repeat left center / 100% 100%;
	.login-box {
		position: absolute;
		left: 6vw;
		top: 18.5vh;
		// transform: translateY(-50%);
		width: 38vw;
		height: 63vh;
		padding: 0px 6vw;
		// background-image: linear-gradient(317deg,
		// rgba(39, 181, 179, 0.15) 0%,
		// rgba(13, 115, 231, 0.4) 100%);
		// border-radius: 16px;
		// border: solid 1px rgba(255, 255, 255, 0.2);
		.logo-icon {
			margin-top: 4vh;
			height: 8vh;
			// background: url('') no-repeat center center;
		}
		.text-box {
			margin-top: 3vh;
			font-family: MicrosoftYaHei;
			font-size: 18px;
			line-height: 1.4;
			letter-spacing: 1px;
			color: #ffffff;
			text-align: center;
			.num {
				margin-left: 4px;
				padding: 0px 2px;
				background-color: #1377ff;
				border-radius: 4px;
			}
		}
		.login-text {
			margin-top: 6vh;
			font-family: MicrosoftYaHeiUI;
			font-size: 30px;
			line-height: 36px;
			letter-spacing: 2px;
			color: #ffffff;
		}

		:deep(.ant-form) {
			margin-top: 2.7vh;
			.ant-form-item {
				margin-bottom: 35px;
				.ant-col {
					width: 100%;
					height: 60px;
					.ant-input-affix-wrapper {
						height: 60px;
						background-color: rgba(255, 255, 255, 0.1);
						border-radius: 6px;
						border: solid 1px rgba(255, 255, 255, 0.2);
						.ant-input-prefix {
							position: relative;
							padding-right: 25px;
							&:before {
								content: '';
								position: absolute;
								top: 50%;
								right: 10px;
								transform: translateY(-50%);
								width: 1px;
								height: 40%;
								background-color: #1377ff;
							}
							.anticon {
								color: #1377ff;
							}
						}
						.ant-input {
							background-color: transparent;
							color: #fff;
						}
					}

					.ant-form-item-control-input {
						.ant-btn {
							width: 100%;
							height: 60px;
							background-image: linear-gradient(
								270deg,
								#27b5b3 0%,
								#0d73e7 100%
							);
							border-radius: 6px;
							box-shadow: 0px 5px 15px 0px rgba(18, 81, 242, 0.8);
							font-family: MicrosoftYaHeiUI;
							font-size: 18px;
							line-height: 22px;
							letter-spacing: 1px;
							color: #ffffff;
							&:hover {
								font-size: 20px;
							}
						}
					}
				}
			}
		}
	}
}
</style>